<template>
    <el-form
        v-if="stepForm"
        :model="stepForm"
        ref="stepForm"
        :rules="rules"
        label-width="80px"
        class="demo-dynamic"
    >
        <el-form-item prop="title" label="步骤名称">
            <el-input v-model="stepForm.title"></el-input>
        </el-form-item>
        <el-form-item prop="description" label="步骤描述">
            <el-input type="textarea" v-model="stepForm.description" :rows="3"></el-input>
        </el-form-item>
        <el-form-item prop="risk" label="风险提示">
            <el-input type="textarea" v-model="stepForm.risk" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="操作演示">
            <video v-if="stepForm.video" :src="stepForm.video" style="width: 100%" controls/>
            <media-selector
                :content="stepForm.video"
                type="video"
                @change="stepForm.video = $event"
            />
        </el-form-item>
        <el-form-item label="教学音频">
            <audio v-if="stepForm.audio" controls style="width: 100%">
                <source :src="stepForm.audio" type="audio/mpeg">
            </audio>
            <media-selector
                :content="stepForm.audio"
                type="audio"
                @change="stepForm.audio = $event"
            />
        </el-form-item>
        <el-form-item label="预计时长">
            <el-input-number v-model="stepForm.duration"></el-input-number>秒
        </el-form-item>
        <el-form-item prop="description" label="业务环节">
            <el-input-number v-model="stepForm.pages"></el-input-number>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-popover:popsave>保 存</el-button>
            <el-button v-if="index !== undefined" type="danger" v-popover:popdel>删 除</el-button>
        </el-form-item>
        <el-popover ref="popsave" placement="top" width="160" v-model="toggleSave">
            <p>确认保存吗？</p>
            <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="toggleSave = false">取消</el-button>
                <el-button type="primary" size="mini" @click="save">确定</el-button>
            </div>
        </el-popover>
        <el-popover ref="popdel" placement="top" width="160" v-model="toggleDel">
            <p>确认删除吗？</p>
            <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="toggleDel = false">取消</el-button>
                <el-button type="primary" size="mini" @click="del">确定</el-button>
            </div>
        </el-popover>
    </el-form>
</template>
<script>
import mediaSelector from './mediaSelector'
export default {
    name: 'step-form',
    props: ['step', 'index'],
    components: { 'media-selector': mediaSelector },
    data() {
        return {
            stepForm: null,
            toggleSave: false,
            toggleDel: false,
            rules: {
                title: [
                    {
                        required: true,
                        message: '请输入步骤名称',
                        trigger: ['blur', 'change']
                    }
                ],
                description: [
                    {
                        required: true,
                        message: '请输入步骤描述',
                        trigger: ['blur', 'change']
                    }
                ]
            }
        }
    },
    mounted() {
        if (this.step) {
            this.stepForm = Object.assign({}, this.step)
        } else {
            this.stepForm = {
                title: '',
                description: '',
                risk: '',
                video: '',
                audio: '',
                pages: null
            }
        }
    },
    methods: {
        save() {
            this.$refs.stepForm.validate(valid => {
                if (valid) {
                    this.toggleSave = false
                    this.$store.commit('course/setBusinessStep', {
                        step: this.stepForm,
                        index: this.index
                    })
                    this.$emit('updated')
                    this.$store.dispatch('course/saveBusinessTemplate')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        del() {
            this.toggleDel = false
            this.$store.commit('course/setBusinessStep', {
                step: null,
                index: this.index
            })
            this.$emit('updated')
        }
    }
}
</script>
<style lang="less">
</style>


